import React, { useState, useEffect } from "react";
import { Contact } from "@react-vant/icons";
import { Popup, Button, Dialog } from "react-vant";
import { useNavigate } from "react-router-dom";
type Props = {};

const My = (props: Props) => {
  const [flag, setFlag] = useState(false);
  const navigate = useNavigate();
  const token = localStorage.getItem("token") || "";
  const username = localStorage.getItem("username") || "";
  useEffect(() => {
    if (token) {
      setFlag(true);
    }
  }, [token]);
  //去登录页面
  const goLogin = () => {
    navigate("/login");
  };
  //切换账号
  const [showCloseIcon, setShowCloseIcon] = useState(false);
  const switchUser = () => {
    setShowCloseIcon(true);
  };
  //退出登录
  const exit = () => {
    console.log(123);
    navigate("/login");
    localStorage.removeItem("token");
    localStorage.removeItem("username");
  };
  //跳转到乘客列表
  const goContacts = () => {
    if (token) {
      navigate("/contacts");
    } else {
      Dialog.confirm({
        message: "当前未登录是否跳转登录页面",
      })
        .then(() => {
          navigate("/login");
        })
        .catch(() => {
          console.log("catch");
        });
    }
  };
  return (
    <div className="my">
      <header>
        {flag ? (
          <div className="box2">
            <div className="top">
              <Contact fontSize={"20px"} />
            </div>
            <span>{username}</span>
            <div
              onClick={switchUser}
              style={{ color: "#fff", fontSize: "12px" }}
            >
              切换账号&emsp;{">"}
            </div>
          </div>
        ) : (
          <div className="box1">
            <div className="top">
              <Contact fontSize={"40px"} />
            </div>
            <div onClick={goLogin} className="text">
              登录/注册
            </div>
          </div>
        )}
      </header>
      <div className="my_box">
        <div>
          <img src={require("../../img/my/联系人.png")} />
          <p onClick={goContacts}>
            常用联系人 <span>{">"}</span>
          </p>
        </div>
        <div>
          <img src={require("../../img/my/订单.png")} />
          <p>
            我的订单 <span>{">"}</span>
          </p>
        </div>
        <div>
          <img src={require("../../img/my/个人中心 客服.png")} />
          <p>
            客服中心 <span>{">"}</span>
          </p>
        </div>
      </div>
      <Popup
        visible={showCloseIcon}
        style={{ height: "30%" }}
        position="bottom"
        onClose={() => setShowCloseIcon(false)}
      >
        <div style={{ width: "100%", height: "30px" }}> </div>

        <Button round type="info" size="large">
          切换账号
        </Button>
        <div style={{ width: "100%", height: "30px" }}> </div>
        <Button onClick={exit} round type="primary" size="large">
          退出登录
        </Button>
      </Popup>
    </div>
  );
};

export default My;
